import { InputItem as AntInput } from 'antd-mobile-v2';
import * as React from 'react';
import { Props, State } from '../type';

// 通过自定义 moneyKeyboardWrapProps 修复虚拟键盘滚动穿透问题
// https://github.com/ant-design/ant-design-mobile/issues/307
// https://github.com/ant-design/ant-design-mobile/issues/163
// const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(
//   window.navigator.userAgent
// );
// let moneyKeyboardWrapProps;
// if (isIPhone) {
//   moneyKeyboardWrapProps = {
//     onTouchStart: (e: any) => e.preventDefault()
//   };
// }

export class InputMoney extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  validator = (_rule: any, _val2: any, callback: any) => {
    const form = this.props.form;
    if (!form) {
      callback();
      return;
    }
    const val = form.getFieldValue(this.props.code);
    if (!val) {
      callback();
      return;
    }
    const reg = /^(\d{0,12}|0)((\.\d{1,2})?)$/;
    if (!reg.test(val)) {
      callback(
        new Error(
          `${this.props.name}格式错误，请输入数字，整数部分最多可输入12位，可输入两位小数`
        )
      );
    }
    callback();
  };

  onBlur = async (e: string) => {
    console.log('blur', e);
    const value = e;
    const form = this.props.form;
    const keyBoard = document.getElementById('am-number-keyboard-container');
    if (keyBoard && keyBoard.childElementCount == 0) {
      keyBoard.className = 'number-keyboard-hide';
    }
    if (!form) {
      return;
    }
    const result = await form.validateFields([this.props.code]);
    // 如果不是指定的类型，则不要parse，否则可能会出现nan的情况
    if (result.errors && result.errors.length) {
      return;
    } else if (value) {
      // 避免空自动转换成0
      form.setFieldsValue({ [this.props.code]: Number(value) });
    }
    this.props.onChange && this.props.onChange(value);
  };

  onFocus = () => {
    const keyBoard = document.getElementById('am-number-keyboard-container');
    if (keyBoard) {
      keyBoard.className = '';
    }
  }

  public handleKeyPress(event: React.KeyboardEvent<HTMLInputElement>) {
    const reg = /[0-9.]/;
    if (!reg.test(String.fromCharCode(event.charCode))) {
      event.preventDefault();
    }
  }

  public render() {
    const { getFieldProps = () => {
      //
    } } = this.props.form || {};
    const {
      form,
      name,
      code,
      required,
      error,
      onErrorClick,
      ...otherProps
    } = this.props;

    return (
      <AntInput
        // title={form ? form.getFieldValue(this.props.code) : ''}
        // moneyKeyboardWrapProps={moneyKeyboardWrapProps}
        type="text"
        {...otherProps}
        {...getFieldProps(this.props.code, {
          rules: [
            { required: this.props.required, message: `请输入${name}` },
            { validator: this.validator }
          ]
        })}
        moneyKeyboardAlign="left"
        onKeyPress={this.handleKeyPress}
        onBlur={this.onBlur}
        onFocus={this.onFocus}
        autoAdjustHeight
      >
        {name}
      </AntInput>
    );
  }
}
